/* --------------------
 TABLE OF CONTENT
-----------------------
1 - TREETABLE
2 - TREELIST
3 - TOASTR
4 - ANIMATIONS
5 - NESTABLE
6 - HINT
----------------------- */
/* ----------------------- */
/*  treetable
/* ----------------------- */
.treetable {
  border-radius: 6px 6px 3px 3px;
  caption {font-size: .9em;font-weight: 700;margin-bottom: .2em}
  th {padding: 1em}
  .indenter {user-select: none;text-align: center}
  .indenter,
  .indenter + a {vertical-align: middle;}
  .indenter + a > i,
  .indenter > a {font-family: FontAwesome;display: inline-block;color: currentColor;font-size: 1.0625rem;text-align: center;line-height: 1.4rem;width: 1.5rem;margin: 0;}
  .collapsed .indenter a:before {content: '\f196'}
  .expanded .indenter a:before {content: '\f147'}
  .accept {background-color: #a3bce4;color: #fff}
  span.file {background-image: url(-0GAbA2ceegTRBuIKOgiihSZNTcC5LUHAihNJR0kGKCDcYJY6D3/77MdOinTvzAgCw8ysThIvn/VojIyMjIyPP+bS1sUQIV2s95pBDDvmbP/mdkft83tpYguZq5Jh/OeaYh+yzy8hTHvNlaxNNczm+la9OTlar1UdA/+C2A4trRCnD3jS8BB1obq2Gk6GU6QbQAS4BUaYSQAf4bhhKKTFdAzrAOwAxEUAH+KEM01SY3gM6wBsEAQB0gJ+maZoC3gI6iPYaAIBJsiRmHU0AALOeFC3aK2cWAACUXe7+AwO0lc9eTHYTAAAAAElFTkSuQmCC)}
  span.folder {background-image: url(-0MNQX0MzAzFAwEzHwARbNFDdwEd31Mj3X7a6uOr9BtzNjYjKBJ6nicP7v3KqcJFaxhBVtZUAK8OHlld2st7Xl3DJPVONP+zEUV4HqL5UDYHr5xvuQAjgl/Qs7TzvOOVAjxjlC+ePSwe6DfbVegLVuT4r14eTr6zvA8xSAoBLzx6pvj4l+DZIezuVkG9fY2H7YRQIMZIBwycmzH1/s3F8AapfIPNF3kQk7+kw9PWBy+IZOdg5Ug3mkAATy/t0usovzGeCUWTjCz0B+Sj0ekfdvkZ3abBv+U4GaCtJ1iEm6ANQJ6fEzrG/engcKw/wXQvEKxSEKQxRGKE7Izt+DSiwBJMUSm71rguMYhQKrBygOIRStf4TiFFRBvbRGKiQLWP29yRSHKBTtfdBmHs0BUpgvtgF4yRFR+NUKi0XZcYjCeCG2smkzLAHkbRBmP0/Uk26O5YnUActBp1GsAI+S5nRJJJal5K1aAMrq0d6Tm9uI6zjyf75dAe6tx/SsWeD//o2/Ab6IH3/h25pOAAAAAElFTkSuQmCC)}
}
/* ---------------------------- */
/*  Treelist
/* ---------------------------- */
.treelist {
  list-style: none; padding: 0;
  ul {padding: .625rem 0 .625rem 3.125rem;position: relative;list-style: none;margin: 0;display: none}
  .open > ul {display: block}
  ul:before {background: #e2e2e2;position: absolute;height: calc(100% - 2rem);content: '';width: 1px;left: 1.5rem;top: -.5rem}
  > li:before,
  > li:after {display: none}
  li {position: relative}
  li:before,
  li:after {position: absolute;background: #e2e2e2;content: '';top: 1.5rem}
  li:before {height: 1px;width: 1.5rem;right: 100%}
  li:after {border-radius: 50%;margin-top: -.15625rem;left: -1.76rem;padding: .15625rem}
  .treeitem {display: flex;align-items: center;border: 1px solid #ddd;margin-bottom: .5em;border-radius: .25rem;position: relative;padding: .625rem;color: #777}
  .treeitem:hover,
  .treeitem:focus {background: #f6f6f6;color: #333}
  .treeitem > i {margin: 0 .25rem;text-align: center;width: 1.1rem}
  .parent > .treeitem > .indicator {text-align: center;width: 1.5625rem;line-height: 1;cursor: pointer}
  .parent > .treeitem > .indicator::before {font-family: themify;content: '\E65D'}
  .parent.open > .treeitem > .indicator::before {content: '\E65F'}
  .parent:last-child::before {border-top: 1px solid #e2e2e2;background: #fff;height: 100%}
  .sortable-drag,
  .sortable-ghost {box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2)}
}
/* ----------------------- */
/*  toastr
/* ----------------------- */
.toast-close-button {position: absolute;top: 1rem;right: 1rem;font-size: 1.5rem;line-height: 1.5rem;font-weight: 700; cursor: pointer; color: inherit !important;opacity: .6;-webkit-appearance: none}
.toast-close-button:focus, .toast-close-button:hover {opacity: .8;outline: 0 !important;box-shadow: none}
.toast {
  background: #fff no-repeat 1rem center;
  background-size: 1.5rem;
  transition: all 268ms cubic-bezier(.02, .01, .47, 1);
  will-change: margin-bottom, opacity;
  border-left: .3rem solid #3da8f5;
  border-radius: .1875rem;
  box-shadow: 0 0 .75rem #999;
  margin-bottom: -3.5rem;
  padding: 1rem 3rem 1rem 3.5rem;
  position: relative;
  overflow: hidden;
  color: #383838;
  width: 20rem;
  opacity: 0;
}
.toast:before {font-family: 'tb-icons';line-height: 1.5rem;font-size: 1.5rem;position: absolute;left: 1rem}
#toast-container:only-child .toast {transition-duration: 168ms}
.toast-wrapper {position: relative;z-index: -1;padding: 0}
.toast.active {margin-bottom: .375rem;opacity: .9}
.toast.active:hover {box-shadow: 0 0 12px #333;opacity: 1}
.toast-warning {border-color: orange;background-image: url('')}
.toast-success {border-color: #53c253;background-image: url('')}
.toast-error {border-color: #ff4f3e;background-image: url('')}
.toast-info {border-color: #3da8f5;background-image: url('')}
.toast-message {word-break: break-word; margin-top: 2px; color: #acacac}
.toast-message a, .toast-message a:hover {color: #50b1f6;text-decoration: none}
.toast-progress {position: absolute;left: 0;bottom: 0;height: 4px;background-color: #000;opacity: .4}
.toast-top-full-width > .toast, .toast-bottom-full-width > .toast {width: 96%;margin-left: auto;margin-right: auto}
.toast-top-center > .toast, .toast-bottom-center > .toast {width: 300px;margin-left: auto;margin-right: auto}
.toast-top-full-width {top: 1rem;right: 0;width: 100%}
.toast-top-center {top: 1rem;right: 0;width: 100%}
.toast-top-right {top: 1rem;right: 1rem}
.toast-top-left {top: 1rem;left: 1rem}
.toast-bottom-full-width {bottom: 1rem;right: 0;width: 100%}
.toast-bottom-center {bottom: 1rem;right: 0;width: 100%}
.toast-bottom-right {right: 1rem;bottom: 1rem}
.toast-bottom-left {bottom: 1rem;left: 1rem}
#toast-container {position: fixed;z-index: 1099}
/* MATERIAL DESIGN RIPPLE */
@keyframes ripple {
  100% {transform: scale(2.5);opacity: 0}
}
.ripple-wrapper { position: relative;overflow: hidden;user-select: none;outline: none }
.ripple-element {
  position: absolute;margin: 0;background: rgba(0, 0, 0, .1);border-radius: 50%;transform: scale(0);
  &.light {background: rgba(255, 255, 255, .4)}
  &.ripple-effect {animation: ripple .8s linear;-o-animation: ripple .8s linear}
}
/* ---------------------------- */
/*  Animations
/* ---------------------------- */
@keyframes fadeOutUpShort {
  0% {opacity: 1}
  100% {opacity: 0;transform: translate3d(0, -20px, 0)}
}
@keyframes fadeInUpShort {
  0% {opacity: 0;transform: translate3d(0, 20px, 0)}
  100% {opacity: 1;transform: none}
}
@keyframes heart-pulse {
  0% {color: #a51919}
  90% {color: rgba(255, 0, 0, 0)}
  100% {color: red}
}
@keyframes scaleIn {
  0% {opacity: 0;transform: scale(0.8)}
  100% {opacity: 1;transform: scale(1)}
}
@keyframes scaleOut {
  0% {opacity: 1;transform: scale(1)}
  100% {opacity: 0;transform: scale(0.9)}
}
.fade-in.enter {animation: fadeIn .5s}
.fade-in.leave {animation: fadeOut .5s}
.fade-in-up.enter {animation: fadeInUpShort .8s}
.fade-in-up.leave {animation: fadeOutUpShort .8s}
.scale.enter, .scale.in {animation: scaleIn .5s}
.scale.leave, .scale.out {animation: scaleOut .5s}
.heart-pulse {animation: heart-pulse 1s linear infinite}
/* transition slide-left / slide-right */
.slide-right-leave-to, .slide-left-enter {transform: translateX(30px);opacity: 0;}
.slide-left-leave-to, .slide-right-enter {transform: translateX(-30px);opacity: 0;}
.slide-left-leave-active, .slide-right-leave-active {transition: transform .5s cubic-bezier(.55, 0, .1, 1), opacity .3s;position: absolute;}
/* transition scale */
.scale-leave-to, .scale-enter {transform: translateY(1.5rem) scale(.98);opacity: 0}
.scale-enter-to, .scale-leave {transform: translateY(0) scale(1);opacity: 1}
.scale-leave-active, .scale-enter-active {transition: transform .4s, opacity .3s;}
/* ---------------------------- */
/*  NESTABLE
/* ---------------------------- */
.dd-list {padding: 0;list-style: none;}
.dd-list .dd-list {padding-left: 3rem;}
.dd-content {transition: background .2s ease;display: flex;align-items: center;border: 1px dashed transparent;border-radius: .125rem;margin-bottom: .5rem;background: #EEEEEE;position: relative;line-height: 40px;}
.dd-list .dd-content.edit {background: #ffcbcb;}
.dd-list .dd-content .text {margin-left: .5rem;margin-right: auto;}
.dd-list .dd-content input {outline: 0 !important;border: 0 !important;line-height: 28px;min-width: 15rem;padding: 0 .5rem;}
.dd-list .dd-content a {margin: 0 .5rem}
.dd-handle {font-family: FontAwesome;font-style: normal;text-align: center;cursor: move;cursor: -webkit-grabbing;width: 40px;color: #999;}
.dd-handle:hover {background: #dddddd}
.dd-handle:before {content: '\F0C9'}
.dd-placeholder, .dd-empty {border: 1px dashed #b6bcbf;border-radius: .125rem;background: #f2fbff;margin: 0 0 .5rem 0;position: relative;padding: 0;}
.dd-dragel {pointer-events: none;position: absolute;z-index: 21;}
.dd-dragel .dd-content {box-shadow: 0 1px 9px rgba(0, 0, 0, .25);border: 1px dotted #b6bcbf;}
.dd-nochildren .dd-placeholder, .dd-expand .dd-list {display: block}
/* ---------------------------- */
/*  Hint.css
/* ---------------------------- */
[class*=hint-] {position: relative;display: inline-block}
[class*=hint-]:after, [class*=hint-]:before {position: absolute;transform: translate3d(0, 0, 0);transition: opacity 218ms ease;transition-delay: 218ms;pointer-events: none;visibility: hidden;z-index: 9;opacity: 0}
[class*=hint-]:before {content: '';position: absolute;background: 0 0;border: 6px solid transparent;z-index: 10}
[class*=hint-]:after {box-shadow: 0 2px 2px rgba(56, 56, 56, 0.25);background: #383838;white-space: nowrap;border-radius: 4px;padding: 8px 10px;line-height: 12px;font-size: 12px;color: #fff}
[class*=hint-]:hover:after, [class*=hint-]:hover:before {visibility: visible;opacity: 1}
[class*=hint-][aria-label]:after {content: attr(aria-label)}
[class*=hint-][data-hint]:after {content: attr(data-hint)}
[aria-label='']:after, [aria-label='']:before, [data-hint='']:after, [data-hint='']:before {display: none !important}
.hint-top-left:before, .hint-top-right:before, .hint-top:before {border-top-color: #383838}
.hint-bottom-left:before, .hint-bottom-right:before, .hint-bottom:before {border-bottom-color: #383838}
.hint-top:after, .hint-top:before {bottom: 100%;left: 50%}
.hint-top:before {margin-bottom: -11px;left: calc(50% - 6px)}
.hint-top:after {transform: translateX(-50%)}
.hint-top:hover:before {transform: translateY(-8px)}
.hint-top:hover:after {transform: translateX(-50%) translateY(-8px)}
.hint-bottom:after, .hint-bottom:before {top: 100%;left: 50%}
.hint-bottom:before {margin-top: -11px;left: calc(50% - 6px)}
.hint-bottom:after {transform: translateX(-50%)}
.hint-bottom:hover:before {transform: translateY(8px)}
.hint-bottom:hover:after {transform: translateX(-50%) translateY(8px)}
.hint-right:before {border-right-color: #383838;margin-left: -11px;margin-bottom: -6px}
.hint-right:after {margin-bottom: -14px}
.hint-right:after, .hint-right:before {left: 100%;bottom: 50%}
.hint-right:hover:after, .hint-right:hover:before {transform: translateX(8px)}
.hint-left:before {border-left-color: #383838;margin-right: -11px;margin-bottom: -6px}
.hint-left:after {margin-bottom: -14px}
.hint-left:after, .hint-left:before {right: 100%;bottom: 50%}
.hint-left:hover:after, .hint-left:hover:before {transform: translateX(-8px)}
.hint-top-left:after, .hint-top-left:before {bottom: 100%;left: 50%}
.hint-top-left:before {margin-bottom: -11px;left: calc(50% - 6px)}
.hint-top-left:after {transform: translateX(-100%);margin-left: 12px}
.hint-top-left:hover:before {transform: translateY(-8px)}
.hint-top-left:hover:after {transform: translateX(-100%) translateY(-8px)}
.hint-top-right:after, .hint-top-right:before {bottom: 100%;left: 50%}
.hint-top-right:before {margin-bottom: -11px;left: calc(50% - 6px)}
.hint-top-right:after {transform: translateX(0);margin-left: -12px}
.hint-top-right:hover:after, .hint-top-right:hover:before {transform: translateY(-8px)}
.hint-bottom-left:after, .hint-bottom-left:before {top: 100%;left: 50%}
.hint-bottom-left:before {margin-top: -11px;left: calc(50% - 6px)}
.hint-bottom-left:after {transform: translateX(-100%);margin-left: 12px}
.hint-bottom-left:hover:before {transform: translateY(8px)}
.hint-bottom-left:hover:after {transform: translateX(-100%) translateY(8px)}
.hint-bottom-right:after, .hint-bottom-right:before {top: 100%;left: 50%}
.hint-bottom-right:before {margin-top: -11px;left: calc(50% - 6px)}
.hint-bottom-right:after {transform: translateX(0);margin-left: -12px}
.hint-bottom-right:hover:after, .hint-bottom-right:hover:before {transform: translateY(8px)}
.hint-large:after, .hint-medium:after, .hint-small:after {white-space: normal;line-height: 1.4em;word-wrap: break-word}
.hint-small:after {width: 80px}
.hint-medium:after {width: 150px}
.hint-large:after {width: 300px}
.hint-always {
  &:after,
  &:before {opacity: 1;visibility: visible}
  &.hint-top:before {transform: translateY(-8px)}
  &.hint-top:after {transform: translateX(-50%) translateY(-8px)}
  &.hint-top-left:before {transform: translateY(-8px)}
  &.hint-top-left:after {transform: translateX(-100%) translateY(-8px)}
  &.hint-top-right:after,
  &.hint-top-right:before {transform: translateY(-8px)}
  &.hint-bottom:before {transform: translateY(8px)}
  &.hint-bottom:after {transform: translateX(-50%) translateY(8px)}
  &.hint-bottom-left:before {transform: translateY(8px)}
  &.hint-bottom-left:after {transform: translateX(-100%) translateY(8px)}
  &.hint-bottom-right:after,
  &.hint-bottom-right:before {transform: translateY(8px)}
  &.hint-left:after,
  &.hint-left:before {transform: translateX(-8px)}
  &.hint-right:after,
  &.hint-right:before {transform: translateX(8px)}
}
